<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<style>
.itemPrice{
	font-size: 14px;
}
.itemPrice a{
	padding: 10px 0 !important;
	display: block;
}
.carImg{
	width: 200px;
	height: 80px;
}
.ibox-title{
	height: auto;
}
.addimteform{
	padding: 20px;
}
</style>
<div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-content mailbox-content">
                        <div class="file-manager">
                            <a class="btn btn-block btn-primary compose-mail" href="mail_compose.html">报价模块</a>
                            <div class="space-25"></div>
                            
                            <ul id="specCate" class="folder-list m-b-md itemPrice" style="padding: 0">
                            </ul>
                            
                             <!--<div class="text-center"><a><i class="fa fa-plus"></i>&nbsp;&nbsp;新增模块</a></div>-->
                            
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-9 animated fadeInRight">
                
               <div class="ibox float-e-margins">
                    <div class="ibox-content mailbox-content">
                        <div class="file-manager">
                            <a class="btn btn-block btn-primary compose-mail" href="mail_compose.html">栏目信息</a>
                            <div class="space-25"></div>
                            
                            <!--表格-->
                            
				                <div class="ibox float-e-margins">
				                	
				                	<div class="ibox-title">
				                        <h5 id ="infoText"></h5>
				                        <div class="ibox-tools">
				                            <a data-id="" class="btn btn-info" id="addItem">
				                                <i class="fa fa-plus"></i>&nbsp;新增栏目
				                            </a>
				                             <div class="clearfix"></div>
				                        </div>
				                        <div class="clearfix"></div>
				                    </div>
				                	
				                    <div class="ibox-content">
				                        <table class="table table-striped">
				                            <thead>
				                                <tr>
				                                    <th>ID</th>
				                                    <th>名称</th>
				                                    <th>价格</th>
				                                    <th>图片</th>
				                                    <th>操作</th>
				                                </tr>
				                            </thead>
				                            <tbody id="tbody">
				                               
				                            </tbody>
				                        </table>
				                    </div>
				                </div>
                            
                            <!--表格结束-->
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                
            </div><!--col-sm-9-->
        </div>
    </div>
    <script type="text/javascript">
    	$.ajax({
    		url:'<%=basePath%>Offer/getSpec',
    		type:'GET',
    		dateType:'JSON',
    		success:function(data){
    			var html = '';
    			$(data.data).each(function(index,ele){
    				html = html + '<li><a onclick="show(this)" data-name="'+ele.specName+'" data-id="'+ele.id+'">'+ele.specName+'</a></li>'
    			});
    			$('#specCate').html(html);
    		},
    		error:function(){
    			toastr.error('网络异常','失败');
    		}
    	})
    	function show(obj){
    		var id = $(obj).attr('data-id');
    		$('#addItem').attr('data-id',id);
    		var text = $(obj).attr('data-name')
    		$('#infoText').html(text);
    		$.ajax({
        		url:'<%=basePath%>Offer/getOffers',
        		type:'POST',
        		data:{
        			'id':id
        		},
        		dateType:'JSON',
        		success:function(data){
        			var html = '';
        			$(data.data).each(function(index,ele){
        				if (!ele.img){
        					img = '';
        				}else{
        					img = '<img src="'+ele.img+'" class="carImg">'
        				}
        				html = html +'<tr><td style="width:10%">'+ele.id+'</td><td style="width:20%">'+ele.name+'</td>'+
                        '<td style="width:20%">'+ele.price+'</td>'+
                        '<td style="width:30%">'+img+'</td>'+
                        '<td style="width:20%"><div class="small">'+
                         /* '<a data-id='+ele.id+' class="btn btn-primary btn-xs editItem"><i class="fa fa-gavel"></i>&nbsp;&nbsp;停用</a>'+ */
                         '<a data-id='+ele.id+' onclick="del(this)" class="btn btn-danger btn-xs delItem"><i class="fa fa-trash"></i>&nbsp;&nbsp;删除</a>'+
                         '</div></td></tr>'
        			});
        			$('#tbody').html(html);
        		},
        		error:function(){
        			toastr.error('网络异常','失败');
        		}
        	})
    	}
    	$('#addItem').click(function(){
    		var id = $('#addItem').attr('data-id');
    		html = '<tr><td></td><td><input class="form-control" style="width:100%"></input></td>'+
            '<td><input class="form-control" style="width:100%"></input></td>'+
            '<td><input type="file" name="file"/></td>'+
            '<td><div class="small">'+
             '<a data-id="'+id+'" onclick="saveAdd(this)" class="btn btn-primary btn-xs"><i class="fa fa-edit"></i>&nbsp;&nbsp;保存</a>'+
             '<a  onclick="cancel(this)" class="btn btn-danger btn-xs"><i class="fa fa-trash"></i>&nbsp;&nbsp;取消</a>'+
             '</div></td></tr>'
    		$('#tbody').append(html);
    	});
    	function cancel(obj){
    		var tr = $(obj).parent().parent().parent();
    		$(tr).fadeOut(300);
    	}
    	function saveAdd(obj){
    		var tr = $(obj).parent().parent().parent();
    		var id = $(obj).attr('data-id')
    		var name = $(tr).find('td:nth-child(2) input').val();
    		var price = $(tr).find('td:nth-child(3) input').val();
    		var file =	$(obj.parentNode.parentNode.parentNode.childNodes[3].childNodes[0]).get(0).files[0];
    		if (!name){
    			toastr.warning('名称不能为空','失败');
    			return false;
    		}
			if (!price){
				toastr.warning('价格不能为空','失败');
				return false;
    		}
			var formData = new FormData();
			formData.append('name',name);
			formData.append('price',price);
			formData.append('id',id);
			formData.append('file',file);
			$.ajax({
				url:'<%=basePath%>Offer/saveOffers',
				type:'POST',
				dataType:'JSON',
				data:formData,
				contentType: false,
				processData: false,
				success:function(data){
					if (data.code=='200'){
						toastr.success('上传成功','成功');
						if (!data.data.img){
							img = ""
						}else{
							img = '<img src="'+data.data.img+'" class="carImg">';
						}
						$(tr).find('td:nth-child(1)').text(data.data.id)
						$(tr).find('td:nth-child(2) input').remove();
						$(tr).find('td:nth-child(2)').text(data.data.name)
			    		$(tr).find('td:nth-child(3) input').remove();
						$(tr).find('td:nth-child(3)').text(data.data.price)
			    		$(tr).find('td:nth-child(4) input').remove();
						$(tr).find('td:nth-child(4)').html(img);
						$(tr).find('td:nth-child(5)').html('<div class="small">'+
                        /*  '<a data-id='+data.data.id+' class="btn btn-primary btn-xs editItem"><i class="fa fa-edit"></i>&nbsp;&nbsp;编辑</a>'+ */
                         '<a data-id='+data.data.id+' onclick="del(this)" class="btn btn-danger btn-xs delItem"><i class="fa fa-trash"></i>&nbsp;&nbsp;删除</a>'+
                         '</div>')
					} else{
						toastr.error(data.message,'失败');
					}
				},
				error:function(){
					toastr.error('网络异常','失败');
				}
			});
    	}
    	function del(obj){
    		var tr = $(obj).parent().parent().parent();
    		new $.flavr({
    			content : '确认删除？',
    	        dialog : 'confirm', 
    	        onConfirm : function(){ 
    	        	var id = $(obj).attr('data-id');
    	    		$.ajax({
    	    			url:'<%=basePath%>Offer/del',
    	    			type : 'POST',
    	    			dataType : 'JSON',
    	    			data : {
    	    				'id' : id,
    	    			},
    	    			success : function(data) {
    	    				if (data.code == '200') {
    	    					toastr.success('删除成功', '操作成功');
    	    					$(tr).fadeOut(300);
    	    				} else {
    	    					toastr.warning(data.message, '操作失败');
    	    				}
    	    			},
    	    			error : function() {
    	    				toastr.error('服务器发烧了>_<,请稍后再试', '网络异常');
    	    			}
    	    		});
    	        }, 
    	        onCancel : function(){
    	        	toastr.warning('取消操作','取消操作');
    	       	 } 
    	     });
    	}
    </script>